<template>
	<div>
		<u-popup width="580" v-model="wheelDia" safe-area-inset-bottom mode="bottom" @close="wheelDiaClose" border-radius="20">
			<view class="">
				<view class="top df jcc aic">
					<view class="close">
						<u-icon name="close" @click="close" font-size="28" color="#333333"></u-icon>
					</view>
					<view class="title">
						请选择优惠券
					</view>
				</view>
				<view class="m20">
					<CouponItem :confirm="true" @click.native="handleChoose(item)" :item="item" v-for="item in couponList"></CouponItem>
				</view>
			</view>
		</u-popup>
	</div>
</template>

<script>
	import CouponItem from './CouponItem.vue'
	export default {
		components:{CouponItem},
		props: {
			value: {
				type: Boolean,
				default: false
			},
			success: {
				type: Boolean,
				default: true
			},
			couponList: {
				type: Array,
				default: () =>[]
			},
		},
		watch: {
			value: {
				immediate: true,
				deep: true,
				handler(e) {
					this.wheelDia = e
				},
		
			}
		},
		data() {
			return{
				wheelDia: false,
			}
		},
		methods:{
			handleChoose(e){
				if(e.isCanUse==0){
					this.$u.toast('当前优惠券不可用')
					return
				}
				this.$emit('handleChoose',e)
				this.wheelDiaClose()
			},
			handleSubmit(){
				this.wheelDiaClose()
			},
			wheelDiaClose(){
				this.wheelDia= false
				this.$emit('input',false)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.top{
			background-color: white;
			padding: 20rpx 22rpx;
			border-bottom: 2rpx solid #e5e5e5;
			>.close{
				width:40rpx ;
				position: absolute;
				right: 20rpx;
			}
			>.title{
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}
			>.desc{
				position: absolute;
				font-size: 28rpx;
				color: #999999;
				right: 20rpx;
			}
			
		}
</style>